<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title>JavaScript Bs_Slider example 4</title>

<style>
  .sliderInput {
  	height:20;
    width:30;
  	font-family : Arial, Helvetica, sans-serif;
  	font-size : 12px;
  }
</style>

<script type="text/javascript" src="../../../lib/LibCrossBrowser.js"></script>
<script type="text/javascript" src="../../../lib/EventHandler.js"></script>
<script type="text/javascript" src="../../../core/form/Bs_FormUtil.lib.js"></script>
<script type="text/javascript" src="../Bs_Slider.class.js"></script>

<script><!--
function init(){
  mySlider = new Bs_Slider();
  mySlider.attachOnChange(bsSliderChange);
  mySlider.width         = 121;
  mySlider.height        = 26;
  mySlider.minVal        = 1;
  mySlider.maxVal        = 10;
  mySlider.valueInterval = 1;
  mySlider.arrowAmount   = 1;
  mySlider.valueDefault  = 5;
  mySlider.imgDir   = '../img/';
  mySlider.setBackgroundImage('bob/background.gif', 'no-repeat');
  mySlider.setSliderIcon('bob/slider.gif', 13, 18);
  mySlider.setArrowIconLeft('img/arrowLeft.gif', 16, 16);
  mySlider.setArrowIconRight('img/arrowRight.gif', 16, 16);
  mySlider.useInputField = 2;
  mySlider.styleValueFieldClass = 'sliderInput';
  mySlider.draw('sliderDiv1');
}

/**
* @param object sliderObj
* @param int val (the value)
*/
function bsSliderChange(sliderObj, val, newPos){ 
	var img = document.getElementById('smiley');
	img.src = "../img/smiley/happyMode/happy" + parseInt(val) + ".gif";
}
// --></script>

</head>
<body bgColor="white" text="#3366aa" link="#0000ee" alink="#ff0000" vlink="#551a8b" onLoad="init();">

<h1>JavaScript Bs_Slider example 4 - Smiley</h1>

This is an example of the <a href="http://www.blueshoes.org/en/javascript/slider/" target="_blank">Slidebar Control</a>.
<br><br>

This example is very similar to example 1 with an attached onChange event. <br>
Only the output of the selected value is much cooler :-)<br><br>

<hr>
<br>
<table border="0" cellspacing="0" cellpadding="0" width="250">
  <tr>
    <td width="200" valign="top"><div id="sliderDiv1"></div></td>
    <td width="50" valign="top">
      <img id="smiley" src="../img/smiley/happyMode/happy3.gif">
    </td>
  </tr>
</table>
</body></html>
